<template>
  <div class="container">
    <el-dialog
      title="编辑工资卡"
      :visible.sync="isEditPayCheck"
      @close="cancelEdit('editPayRowData')"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="editPayRowData"
        :rules="rules"
        ref="editPayRowData"
        label-width="160px"
      >
        <el-form-item label="人员姓名">
          <span>{{ editPayRowData.name }}</span>
        </el-form-item>
        <el-form-item label="工资卡所属银行" prop="bankName">
          <el-select
            v-model="editPayRowData.bankId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) of bankData"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="工资卡号" prop="accountId">
          <el-input
            v-model="editPayRowData.accountId"
            autocomplete="off"
            placeholder="请输入"
            class="inputWidth"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click.native="savePayCheckInfo('editPayRowData')"
          class="save"
          >保存</el-button
        >
        <el-button @click.native="cancelEdit('editPayRowData')" class="cancel"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formLabelWidth: '125px',
      rules: {
        bankName: [
          {
            required: true,
            message: '工资卡所属银行不能为空',
            trigger: 'change',
          },
        ],
        accountId: [
          {
            required: true,
            pattern: /^\d{15,19}$/,
            message: '请输入正确的工资卡号',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  //搜索条件
  props: ['isEditPayCheck', 'editPayRowData', 'bankData', 'gitEmployeData'],
  created() {},
  mounted() {},
  computed: {},
  methods: {
    savePayCheckInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-e/nc/contract/expand/setaccount',
            data: {
              id: this.editPayRowData.contractId,
              accountId: this.editPayRowData.accountId,
              bankId: this.editPayRowData.bankId,
            },
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$emit('isShowPayCheck', false)
                this.$message({
                  type: 'success',
                  message: response.data.msg,
                })
                // this.getTree()
                this.gitEmployeData(1, 5)
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.msg,
                })
              }
            })
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    //
    cancelEdit(formName) {
      // this.showAdjustDepartment = false;
      this.$refs[formName].resetFields()
      this.$emit('isShowPayCheck', false)
      // this.editPayCheck = false
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .treeStyle {
    height: 300px;
    overflow-y: auto;
  }
}
</style>
